<template>
	<view class="content">
		<!--图片滚动-->
		<scroll-view scroll-x class="content_1">
			<view style="width: 0upx;height: 384upx;display: inline-block;"></view>
			<block v-for="(shopimg, index_shopimg) in shopimgList" :key='index_shopimg'>
				<image class="shopimg_box" :src="shopimg" @click="previewImage(index_shopimg)" mode="aspectFill"></image>
			</block>
		</scroll-view>
		<!--房屋信息-->
		<view class="content_2">
			<view class="house_text" style="color: #B3E9DC; width: 18%;">{{house_BasicInfo.renttype}}</view>
			<view class="line_2"></view>
			<view class="house_text" style="width: 52%;">{{house_BasicInfo.house_name}}</view>
			<view class="line_2"></view>
			<view class="house_text" style="width: 30%;">{{house_BasicInfo.house_type}}</view>
		</view>
		<!--租金-->
		<view class="content_3">
			<view class="house_money">{{house_BasicInfo.house_money}} 元/月</view>
			<view class="house_condition">{{house_BasicInfo.mortgage}}</view>
		</view>
		<!--房屋详细信息-->
		<view class="content_4">
			<view class="house_detailbox">
				<view class="detail_info">{{house_BasicInfo.house_type}}</view>
				<view class="detail_types">户型</view>
			</view>
			<view class="house_detailbox">
				<view class="detail_info">{{house_BasicInfo.house_area}}</view>
				<view class="detail_types">建面</view>
			</view>
			<view class="house_detailbox">
				<view class="detail_info">{{house_BasicInfo.house_floor}}</view>
				<view class="detail_types">楼层</view>
			</view>
			<view class="house_detailbox">
				<view class="detail_info">{{house_BasicInfo.house_direction}}</view>
				<view class="detail_types">朝向</view>
			</view>
			<view class="callto" @click="Callto">
				<image class="callto_icon" src="../../../static/index/detail/callto.png"></image>
			</view>
		</view>
		<!--最低起租-->
		<view class="content_5" v-if="house_BasicInfo.rentday != null">
			<image class="tips_icon" src="../../../static/index/detail/warning.svg"></image>
			<view class="tips_info">此房源最低需租{{house_BasicInfo.rentday}}</view>
		</view>
		<!--房子位置-->
		<view class="content_6">
			<view class="house_location">{{house_BasicInfo.house_addr}}</view>
			<image class="location_icon" src="../../../static/index/detail/location_icon.svg"></image>
		</view>
		<!--地图位置-->
		<view class="content_7"  @click="open_map">
			<view class="map_title">小区及周边</view>
			<!-- <scroll-view scroll-x class="map_types">
				<block v-for="(maptypes, index_types) in maptypesList" :key='index_types'>
					<view class="types_box" @click="changeMapTab(index_types)">
						<view class="types_name" :class="{'types_name_active': mapindex == index_types}">{{maptypes.typename}}</view>
						<view class="types_line" v-if="mapindex == index_types"></view>
					</view>
				</block>
			</scroll-view> -->
			<view class="map_view">
				<map class="map_view" :latitude="latitude" :longitude="longitude" :markers="covers" @tap="open_map">
					<!--两个内圆角遮罩层...-->
					<cover-view class="space_1" style="position: absolute; top: 374upx; left: 0upx;"></cover-view>
					<cover-view class="space_2" style="position: absolute; top: 374upx; right: 0upx;"></cover-view>
				</map>
			</view>
		</view>
		<!--已入住人员-->
		<view class="content_8" v-if="house_BasicInfo.renttype_status == 2" >
			<view class="title_8">已入住人员</view>
			<view class="line_title"></view>
			<block v-for="(renter, index_renter) in renterList" :key='index_renter'>
				<view class="renter_view">
					<image class="renter_img" :src="renter.avatar" v-if="renter.room_status == 1"></image>
					<view class="renter_img" v-if="renter.room_status == 2">无</view>
					<view class="renter_state">{{renter.room_name}}</view>
					<view class="renter_state" v-if="renter.room_status == 1">已入住</view>
					<view class="renter_state" v-if="renter.room_status == 2">未入住</view>
					<view class="renter_state" style="position: absolute;top: 22upx; right: 13upx;" v-if="renter.room_status == 1">{{renter.sex}}</view>
					<view class="renter_state" style="position: absolute;top: 22upx; right: 13upx;" v-if="renter.room_status == 2"></view>
				</view>
			</block>
		</view>
		<!--房屋特色-->
		<view class="content_9">
			<view class="title_9">房屋特色</view>
			<view class="line_title"></view>
			<view class="special_view">
				<block v-for="(detailLabel, index_label) in house_detail_label" :key='index_label'>
					<view class="house_special">{{detailLabel.show_name}}</view>
				</block>
			</view>
		</view>
		<!--配套措施-->
		<view class="content_10">
			<view class="title_10">配套措施</view>
			<view class="line_title"></view>
			<view class="equipment_view">
				<block v-for="(equipment, index_equipment) in house_detail_equipment" :key='index_equipment'>
					<view class="equipment_box">
						<image class="equipment_img" :src="equipment.show_image"></image>
						<view class="equipment_name">{{equipment.show_name}}</view>
					</view>
				</block>
			</view>
		</view>
		<!--底部按钮-->
		<view class="content_11">
			<view class="collect_view" @click="Collect">
				<image class="collect_icon" v-if="collectstate == '2'" src="../../../static/index/detail/unlike.png"></image>
				<image class="collect_icon" v-if="collectstate == '1'" src="../../../static/index/detail/like.png"></image>
				<view class="collect_text">收藏</view>
			</view>
			<view class="btn_11" style="background-color: #63D0D5; margin-right: 22upx;" @click="Callto">预约看房</view>
			<view class="btn_11" style="background-color: #FFC26D;" @click="toSign">立即签约</view>
		</view>
	</view>
</template>

<script>
	//导入接口请求文件
	import {Request} from '../../../utils/request.js';
	import func from '../../../utils/function.js';
	const Func = new func();
	const Requ = new Request();
	//定义getApp对象
	const app = getApp();
	export default {
		data() {
			return {
				mapindex: '0',
				shopimgList: [],
				maptypesList: [{
						typename: '户型'
					},
					{
						typename: '商超'
					},
					{
						typename: '金融'
					},
					{
						typename: '餐饮'
					},
					{
						typename: '医疗'
					}
				],
				renterList: [],
				house_detail_label: [],
				house_detail_equipment: [],
				house_BasicInfo: [],
				collectstate: '',
				id: 0, // 使用 marker点击事件 需要填写id
				//这个是地图组件的中心位置
				latitude: 39.909,
				longitude: 116.39742,
				//这个是点的位置
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
				}, ]
			}
		},
		methods: {
			//打开地图APP
			open_map: function(){
				uni.openLocation({
					name: this.house_BasicInfo.house_name,
					address: this.house_BasicInfo.house_addr,
					latitude: parseFloat(this.covers[0].latitude),
					longitude: parseFloat(this.covers[0].longitude),
					success: function () {
						console.log('success');
					},
					fail: (res) => {
						console.log('error',res);
					}
				});
			},
			//预览图片
			previewImage: function(index) {
				//预览图片路径要放绝对路径,http或https
				uni.previewImage({
					current: index,
					urls: this.shopimgList
				})
			},
			//切换地图标签
			changeMapTab: function(index_types) {
				this.mapindex = index_types
			},
			//跳转至签约
			toSign: function() {
				
				if (app.globalData.Logincode == -1) {
					uni.showToast({
						position: 'center',
						title: '用户未登录',
						icon: 'none',
					});
				} else {
					let PostData = [];
					PostData['userid'] = app.globalData.userid;
					Func.PostApi('Create_Order_Info/is_live', PostData, (res)=>{
						let ResponseData = res.data;
						if(ResponseData.code == 1){
							uni.navigateTo({
								url: '/pages/index/detail/sign/sign?house_id=' + this.id
							});
							return;
						}
						Requ.showToast(ResponseData.msg);
					});
					
				}
			},
			//拨打电话,预约看房
			Callto: function() {
				uni.makePhoneCall({
					phoneNumber: this.phoneNumber.toString(),
				})
			},
			//收藏
			Collect: function() {
				new Request('User_collect/ClickCollectInfo').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							collect_id: this.id,
							collect_type: 'house',
							openid: app.globalData.openid
						}
					},
					(res) => {
						this.collectstate = '1'
						console.log(res)
						if (res.data.code == '1') {
							uni.showToast({
								title: '收藏成功',
								position: 'center',
								icon: 'success'
							})
						} else if (res.data.code == '0') {
							uni.showToast({
								title: '你已经收藏该宝贝了',
								position: 'center',
								icon: 'none'
							})
						}
					}
				)
			}
		},
		onLoad(option) {
			this.id = option.id;
			//获取房源详细
			new Request('Get_House_Info/GetHouseDetailInfo').request(
				() => {
					return 'POST'
				},
				() => {
					return {
						house_id: this.id,
						openid: app.globalData.openid
					}
				},
				(res) => {
					console.log(res.data)
					this.shopimgList = res.data.house_DetailImage.map(item => {
						return item.show_image
					})
					this.renterList = res.data.house_detail_room
					this.house_detail_label = res.data.house_detail_label
					this.house_detail_equipment = res.data.house_detail_equipment
					this.house_BasicInfo = res.data.house_BasicInfo
					this.collectstate = res.data.house_collect.status
					this.latitude = res.data.house_BasicInfo.latitude
					this.longitude = res.data.house_BasicInfo.longitude
					this.covers[0].latitude = res.data.house_BasicInfo.latitude
					this.covers[0].longitude = res.data.house_BasicInfo.longitude;
					//房东/管理员电话
					this.phoneNumber = res.data.house_BasicInfo.house_phone;
					
				}
			)
		},
	}
</script>

<style>
	page {
		background-color: #f9f9f9;
	}

	.content {
		padding-bottom: 165upx;
	}

	/*
		图片滚动样式
	*/
	.content_1 {
		height: 550upx;
		width: 750upx;
		display: flex;
		white-space: nowrap;
	}

	.shopimg_box {
		height: 550upx;
		width: 100%;
		/* margin-right: 22upx; */
		display: inline-block;
		/* border-radius: 8upx; */
	}

	/*
		房屋信息样式
	*/
	.content_2 {
		height: 38upx;
		margin-top: 30upx;
		padding-left: 20upx;
		display: flex;
		align-items: center;
	}

	.house_text {
		height: 38upx;
		line-height: 38upx;
		font-size: 38upx;
		font-weight: bold;
		padding: 0 20upx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.line_2 {
		height: 38upx;
		width: 5upx;
		background-color: #333333;
	}

	/*
		租金样式
	*/
	.content_3 {
		height: 56upx;
		display: flex;
		align-items: baseline;
		margin-top: 20upx;
		padding-left: 60upx;
	}

	.house_money {
		height: 56upx;
		line-height: 56upx;
		font-size: 40upx;
		font-weight: bold;
		color: #FFC26E;
		margin-right: 10upx;
	}

	.house_condition {
		height: 28upx;
		line-height: 28upx;
		font-size: 20upx;
		color: #999999;
	}

	/*
		房屋详细信息样式
	*/
	.content_4 {
		height: 106upx;
		background-color: #FFFFFF;
		margin-top: 20upx;
		padding: 70upx 55upx 30upx 55upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}

	.house_detailbox {
		height: 106upx;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
	}

	.detail_info {
		height: 42upx;
		line-height: 42upx;
		font-size: 32upx;
		color: #333333;
	}

	.detail_types {
		height: 50upx;
		line-height: 50upx;
		font-size: 32upx;
		color: #999999;
	}

	.callto {
		position: absolute;
		width: 100upx;
		height: 100upx;
		border-radius: 100upx;
		background-color: #63D0D5;
		top: -50upx;
		right: 40upx;
		box-shadow: 0upx 4upx 12upx 0upx rgba(0, 0, 0, 0.4);
		display: flex;
		align-items: center;
	}

	.callto_icon {
		width: 50upx;
		height: 50upx;
		margin: 0 auto;
	}

	/*
		最低起租样式
	*/
	.content_5 {
		height: 60upx;
		background-color: #63D0D5;
		display: flex;
		align-items: center;
		padding-left: 50upx;
	}

	.tips_icon {
		width: 30upx;
		height: 30upx;
		border-radius: 30upx;
		margin-right: 30upx;
	}

	.tips_info {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #FFFFFF;
	}

	/*
		房子位置样式
	*/
	.content_6 {
		height: 96upx;
		background-color: #FFFFFF;
		border-radius: 26upx;
		margin: 0 15upx;
		margin-top: 40upx;
		padding-left: 50upx;
		display: flex;
		align-items: center;
	}

	.house_location {
		height: 46upx;
		line-height: 46upx;
		font-size: 32upx;
		color: #333333;
		margin-right: 20upx;
	}

	.location_icon {
		height: 47upx;
		width: 47upx;
	}

	/*
		地图位置样式
	*/
	.content_7 {
		height: 538upx;
		background-color: #FFFFFF;
		margin: 0 15upx;
		margin-top: 40upx;
		border-radius: 26upx;
		padding-top: 30upx;
	}

	.map_title {
		height: 46upx;
		line-height: 46upx;
		margin-left: 27upx;
		font-size: 34upx;
		color: #333333;
	}

	.map_types {
		height: 50upx;
		width: 600upx;
		margin: 0 58upx;
		margin-top: 20upx;
		display: flex;
		white-space: nowrap;
	}

	.types_box {
		height: 50upx;
		width: 60upx;
		margin-right: 76upx;
		display: inline-block;
	}

	.types_name {
		height: 40upx;
		width: 60upx;
		line-height: 40upx;
		font-size: 30upx;
		color: #999999;
	}

	.types_name_active {
		height: 40upx;
		width: 60upx;
		line-height: 40upx;
		font-size: 30upx;
		color: #5EC7CB;
	}

	.types_line {
		height: 6upx;
		width: 20upx;
		margin: 0 auto;
		background-color: #5EC7CB;
	}

	.map_view {
		height: 404upx;
		width: 100%;
		margin-top: 20upx;
	}

	/*
		两个内圆角遮罩层..
	*/
	.space_1 {
		height: 35upx;
		width: 35upx;
		background-image: radial-gradient(35upx at top right, transparent 35upx, #f9f9f9 35upx);
	}

	.space_2 {
		height: 35upx;
		width: 35upx;
		background-image: radial-gradient(35upx at top left, transparent 35upx, #f9f9f9 35upx);
	}

	/*
		已入住人员样式
	*/
	.content_8 {
		margin: 0 15upx;
		background-color: #FFFFFF;
		margin-top: 40upx;
		border-radius: 26upx;
		padding: 30upx 25upx;
		display: flex;
		flex-direction: column;
	}

	.title_8 {
		height: 37upx;
		font-size: 28upx;
		color: #333333;
		line-height: 37upx;
	}

	.line_title {
		height: 6upx;
		width: 120upx;
		background-color: #B3E9DC;
		margin-bottom: 4upx;
	}

	.renter_view {
		height: 80upx;
		margin-top: 34upx;
		display: flex;
		align-items: center;
		position: relative;
	}

	.renter_img {
		height: 80upx;
		width: 80upx;
		border-radius: 80upx;
		margin-right: 28upx;
		background-color: #AAAAAA;
		font-size: 36upx;
		text-align: center;
		line-height: 80upx;
		color: #FFFFFF;
	}

	.renter_state {
		height: 32upx;
		line-height: 32upx;
		font-size: 24upx;
		color: #666666;
		margin-right: 20upx;
	}

	/*
		房屋特色样式
	*/
	.content_9 {
		margin: 0 15upx;
		background-color: #FFFFFF;
		margin-top: 40upx;
		border-radius: 26upx;
		padding: 30upx 25upx 10upx 25upx;
		display: flex;
		flex-direction: column;
	}

	.title_9 {
		height: 37upx;
		font-size: 28upx;
		color: #333333;
		line-height: 37upx;
	}

	.special_view {
		margin-top: 20upx;
		display: flex;
		flex-wrap: wrap; //弹性盒元素换行
	}

	.house_special {
		height: 57upx;
		border-radius: 57upx;
		border: 4upx solid #B3E9DC;
		line-height: 57upx;
		font-size: 28upx;
		display: flex;
		align-items: center;
		text-align: center;
		padding: 0upx 40upx;
		color: #999999;
		margin-bottom: 20upx;
		margin-right: 26upx;
	}

	/*
		配套设施样式
	*/
	.content_10 {
		margin: 0 15upx;
		background-color: #FFFFFF;
		margin-top: 40upx;
		border-radius: 26upx;
		padding: 30upx 25upx 7upx 25upx;
		display: flex;
		flex-direction: column;
	}

	.title_10 {
		height: 37upx;
		font-size: 28upx;
		color: #333333;
		line-height: 37upx;
	}

	.equipment_view {
		margin-top: 20upx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap; //弹性盒元素换行
	}

	.equipment_box {
		height: 250upx;
		width: 194upx;
		background-color: #F0F0F0;
		border-radius: 20upx;
		margin-bottom: 23upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		padding: 10upx;
	}

	.equipment_img {
		height: 190upx;
		width: 190upx;
		background-color: #a1a1a1;
	}

	.equipment_name {
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #666666;
	}

	/*
		底部按钮样式
	*/
	.content_11 {
		height: 70upx;
		width: 694upx;
		background-color: #FFFFFF;
		position: fixed;
		z-index: 999;
		bottom: 0upx;
		left: 0upx;
		padding: 12upx 30upx 18upx 30upx;
		display: flex;
		align-items: center;
	}

	.collect_view {
		width: 113upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-right: 52upx;
	}

	.collect_icon {
		width: 38upx;
		height: 38upx;
	}

	.collect_text {
		height: 40upx;
		line-height: 40upx;
		font-size: 30upx;
		color: #333333;
	}

	.btn_11 {
		height: 70upx;
		width: 250upx;
		text-align: center;
		font-size: 30upx;
		line-height: 70upx;
		color: #FFFFFF;
		border-radius: 9upx;
	}
</style>
